<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>testmp4</title>
        <script src="jquery-3.4.1.js" type="text/javascript"></script>
        <script type="application/javascript">
            $(function (){
                window.setInterval(videoAjax,500)
                let domVideo0=document.getElementById("devVideo0");
                let domVideo1=document.getElementById("devVideo1");
                let video0=$("#devVideo0");
                let video1=$("#devVideo1");
                //存储播放视频的src
                let arry=[];
                //标记各自标签是否在播放
                let isPlay0=false;
                let isPlay1=false;
                //标记是否需要更换标签
                let needChangeSrc0=true;
                let needChangeSrc1=true;
                //0和1交替获取
                let get0Or1=true;
                function videoAjax(){
                    $.ajax({
                        url: "t",
                        dataType: "json",
                        method: "post",
                        success: function (resp) {
                            arry.push(resp);
                            if (get0Or1){//0
                                if (!isPlay0){//0还没播放
                                    if (isPlay1){//1在播，0看需不需要换标签
                                        if (needChangeSrc0){//需要换
                                            needChangeSrc0=false;
                                            video0.attr("src",arry.shift());
                                            domVideo0.pause();
                                        }
                                    }else {//1也没播放，就播放0
                                        needChangeSrc0=false;
                                        choose0();
                                        //添加0号video标签准备播放
                                        video0.attr("src",arry.shift());
                                        domVideo0.play();
                                        isPlay0=true;
                                    }
                                }
                            } else{//1
                                if (!isPlay1){//1还没播放
                                    if (isPlay0){//0正在播，1看需不需要换标签
                                        if (needChangeSrc1){//需要换
                                            needChangeSrc1=false;
                                            video1.attr("src",arry.shift());
                                            domVideo1.pause();
                                        }
                                    }else {//0没有播，1直接播
                                        needChangeSrc1=false;
                                        choose1();
                                        video1.attr("src",arry.shift());
                                        domVideo1.play();
                                        isPlay1=true;
                                    }
                                }
                            }
                            get0Or1 = !get0Or1;
                        },
                        error:function () {}
                    })
                }
                //监听0号video结束
                video0.bind("ended",function(){
                    needChangeSrc0=true;
                    //传给后端已经播放完的文件
                    urlAjax(video0.attr("src"));
                    if (arry.length==0){//没有多余的视频生成不播放
                        if (!isPlay1&&!needChangeSrc1){//如果1这时候没有播，切换到1播放因为1可能有标签
                            isPlay1=true;
                            domVideo1.play();
                            choose1();
                        }
                        isPlay0=false;
                        return;
                    }
                    if (!needChangeSrc1){
                        choose1();
                        isPlay1=true;
                        domVideo1.play();
                    }
                    isPlay0=false;

                })
                //监听1号video结束
                video1.bind("ended",function(){
                    needChangeSrc1=true;
                    //传给后端已经播放完的文件
                    urlAjax(video1.attr("src"));
                    //更换标签才能继续播放
                    if (arry.length==0){//没有多余的视频生成不播放
                        if (!isPlay0&&!needChangeSrc0){//如果0这时候没有播，切换到0播放因为0可能有标签
                            isPlay0=true;
                            domVideo0.play();
                            choose0();
                        }
                        isPlay1=false;
                        return;
                    }
                    if (!needChangeSrc0){
                        choose0();
                        isPlay0=true;
                        domVideo0.play();
                    }
                    isPlay1=false;
                })
                function urlAjax(param){
                    $.ajax({
                        url: "t",
                        dataType: "json",
                        method: "get",
                        data:"fileName="+param,
                    })
                }
                //隐藏0显示1
                function choose1(){
                    video0.css("display","none");
                    video1.css("display","");
                }
                //隐藏1显示0
                function choose0(){
                    video1.css("display","none");
                    video0.css("display","");
                }
            })
        </script>
        <style>
            video{
                padding-left: 20%;
                width:60%;
            }
        </style>
    </head>
    <body>
<!--    <h2 align="center" id="wait">正在加载中请稍等......</h2>-->
        <div>
            <video id="devVideo0" muted="muted">浏览器不支持 video0 标签</video>
            <video id="devVideo1" muted="muted">浏览器不支持 video1 标签</video>
        </div>
    </body>
</html>